<template>
  <div style="height:100%;width:100%;">
    <div class="dictCanvas" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "basicIncome",
 props: {
   idctEchart: {
     type: Object,
     default: () => {
       return {};
     }
   }
 },
 watch:{
   idctEchart(val){
    this.getPie(val);
   }
 },
  methods: {
    getPie(val) {
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".dictCanvas"));
      let option = {
      tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            },
         formatter:"{b} {c}%",
          },

        grid: {
          left: "20px",
          right: "20px",
          // bottom:'20px',
          top:'20px'

         },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data:val.xAxis,
          axisLabel: {
            interval: 0,
            rotate: 33,
            fontSize: '12px'
          }
          },
        yAxis:
              {
                  type: 'value',
                  min: 0,
                  splitLine:{show: false},  //去除网格线
                  // max: maxData*2,
                  // // interval: 50,
                  axisLabel: {
                      formatter: '{value}%',
                      show:false
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:false
                  },
              },
        series:
         {
          type: "bar",
          name: 'DICT收入',
          data: val.yAxis,
          barWidth :20,
          // itemStyle:{
          //       normal:{
          //         color: "#0070c0",
          //       }
          //   },
         itemStyle: {
                     normal: {
                         // 随机显示
                         //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                         // 定制显示（按顺序）
                         color: function(params) {
                           var c="";
                           var index =val.xAxis.indexOf("浙江");
                           if(params.dataIndex == index){
                                  c='#c00000'
                              }else{
                                  c='#0070c0'
                              }
                              return c;
                         },
                         label : {
                                 show: true,
                                 position: 'top',
                                 textStyle: {
                                    color: '#0070c0'
                                  },
                                   formatter:"{c}%",
                         },
                     },
                 },
        },
      };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
